<script setup lang="ts" name="columnSelect">
defineProps<{
  columns: { columnId: string; columnName: string }[]
}>()

const emit = defineEmits(['selectedColumnId'])

function optionSelected(e: HTMLOptionElement) {
  emit('selectedColumnId', e.value)
}
</script>

<template>
  <div id="columnSelect">
    <b>选择专栏</b>
    <select name="" id="" @change="optionSelected($event.target as HTMLOptionElement)">
      <option value="" selected></option>
      <option v-for="column in columns" :key="column.columnId" :value="column.columnId">
        {{ column.columnName }}
      </option>
    </select>
  </div>
</template>

<style scoped>
#columnSelect {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 0 auto;
  border-radius: var(--radius);
  background-color: var(--color1);
  border: 2px dashed var(--color2);
  box-sizing: border-box;
}
b {
  display: block;
  height: 46px;
  line-height: 46px;
  text-align: center;
  color: var(--color2);
}
select {
  cursor: pointer;
  height: 50px;
  width: 100%;
  background-color: var(--color1);
  border: none;
  color: var(--color3);
  text-align: center;
  font-size: 16px;
  border-radius: var(--radius);
  > option {
    color: var(--color2);
  }
}
</style>
